<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>图书管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- HarmonyOS 优化配置 -->
    <meta name="theme-color" content="#3880ff" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    
    <!-- 预加载关键资源 -->
    <link rel="preload" href="./css/app.css" as="style" />
    <link rel="preload" href="./js/app.js" as="script" />
    
    <!-- 样式文件 -->
    <link href="./css/app.css" rel="stylesheet" />
    <link href="./css/chunk-ionic.css" rel="stylesheet" />
    
    <style>
        /* HarmonyOS 适配样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            overflow: hidden;
        }
        
        #app {
            height: 100vh;
            width: 100vw;
        }
        
        /* 加载动画 */
        .loading-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #3880ff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            color: white;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .debug-info {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 8px;
            border-radius: 4px;
            font-size: 12px;
            z-index: 10000;
            max-width: 200px;
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div class="loading-container" id="loading">
        <div class="loading-spinner"></div>
        <div>图书管理系统</div>
        <div style="font-size: 14px; margin-top: 10px;">正在加载...</div>
    </div>
    
    <!-- 应用容器 -->
    <div id="app"></div>
    
    <!-- 调试信息 -->
    <div class="debug-info" id="debug" style="display: none;">
        <div>🔧 HarmonyOS Debug</div>
        <div id="debug-status">初始化中...</div>
    </div>

    <script>
        // HarmonyOS 环境配置
        window.process = window.process || {};
        window.process.env = window.process.env || {};
        window.process.env.NODE_ENV = 'production';
        window.process.env.BASE_URL = './';
        window.process.env.VUE_APP_TITLE = '图书管理系统';
        
        // 调试函数
        function updateDebug(message) {
            const debug = document.getElementById('debug-status');
            if (debug) {
                debug.textContent = message;
            }
            console.log('[HarmonyOS Debug]', message);
        }
        
        // 隐藏加载动画
        function hideLoading() {
            const loading = document.getElementById('loading');
            if (loading) {
                loading.style.opacity = '0';
                setTimeout(() => {
                    loading.style.display = 'none';
                }, 300);
            }
        }
        
        // 显示调试信息
        function showDebug() {
            const debug = document.getElementById('debug');
            if (debug) {
                debug.style.display = 'block';
            }
        }
        
        // 监听应用挂载
        let appMounted = false;
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.target.id === 'app' && mutation.target.children.length > 0 && !appMounted) {
                    appMounted = true;
                    updateDebug('✅ 应用已挂载');
                    hideLoading();
                    
                    // 检查路由
                    setTimeout(() => {
                        const routerOutlet = document.querySelector('ion-router-outlet');
                        if (routerOutlet) {
                            updateDebug('✅ 路由正常');
                            // 3秒后隐藏调试信息
                            setTimeout(() => {
                                const debug = document.getElementById('debug');
                                if (debug) debug.style.display = 'none';
                            }, 3000);
                        } else {
                            updateDebug('⚠ 路由异常');
                            showDebug();
                        }
                    }, 1000);
                }
            });
        });
        
        observer.observe(document.getElementById('app'), {
            childList: true,
            subtree: true
        });
        
        // 错误处理
        window.addEventListener('error', function(e) {
            updateDebug('❌ ' + e.message.substring(0, 30));
            showDebug();
        });
        
        window.addEventListener('unhandledrejection', function(e) {
            updateDebug('❌ Promise: ' + String(e.reason).substring(0, 20));
            showDebug();
        });
        
        // 超时检查
        setTimeout(() => {
            if (!appMounted) {
                updateDebug('❌ 应用挂载超时');
                showDebug();
                hideLoading();
            }
        }, 10000);
        
        updateDebug('🚀 开始加载应用');
    </script>
    
    <!-- 应用脚本 -->
    <script src="./js/chunk-vendors.js"></script>
    <script src="./js/chunk-ionic.js"></script>
    <script src="./js/app.js"></script>
</body>
</html>